{% extends "website/staff/staff_base.html" %}
{% block staff_content %}
<section class="section">
  <div class="card">
    <div class="card-title">
      <div class="icon">📊</div>
      <div>
        <h1 class="h1" style="margin:0">Staff Dashboard</h1>
        <div class="small">Monitor bookings, applications, payments, EMR, and activity.</div>
      </div>
    </div>

    <div class="sep"></div>

    <div class="grid grid-3">
      <div class="card" style="padding:14px">
        <div class="small" style="font-weight:900">Telehealth bookings</div>
        <div class="h2" style="margin:6px 0 0">{{ stats.telehealth_bookings }}</div>
        <div class="small">Paid: {{ stats.telehealth_paid }}</div>
        <div class="row" style="margin-top:10px;gap:8px;flex-wrap:wrap">
          <a class="btn" href="{% url 'website:staff_telehealth_booking_list' %}">Manage</a>
          <a class="btn" href="{% url 'website:staff_slot_list' %}">Slots</a>
          <a class="btn" href="{% url 'website:staff_provider_list' %}">Manage Clinicians</a>
        </div>
      </div>

      <div class="card" style="padding:14px">
        <div class="small" style="font-weight:900">Care requests</div>
        <div class="h2" style="margin:6px 0 0">{{ stats.care_requests }}</div>
        <div class="row" style="margin-top:10px;gap:8px;flex-wrap:wrap">
          <a class="btn" href="{% url 'website:staff_care_dashboard' %}">Care Dashboard</a>
          <a class="btn" href="{% url 'website:staff_care_request_list' %}">View details</a>
        </div>
      </div>

      <div class="card" style="padding:14px">
        <div class="small" style="font-weight:900">Career applications</div>
        <div class="h2" style="margin:6px 0 0">{{ stats.career_applications }}</div>
        <div class="small">Enquiries: {{ stats.enquiries }}</div>
        <div class="row" style="margin-top:10px;gap:8px;flex-wrap:wrap">
          <a class="btn" href="{% url 'website:staff_career_application_list' %}">Applications</a>
          <a class="btn" href="{% url 'website:staff_career_application_list' %}">Enquiries</a>
        </div>
      </div>
    </div>

    <div class="sep"></div>

    <div class="grid grid-3">
      <div class="card" style="padding:14px">
        <div class="small" style="font-weight:900">Support tickets</div>
        <div class="h2" style="margin:6px 0 0">{{ stats.support_tickets }}</div>
        <div class="row" style="margin-top:10px;gap:8px;flex-wrap:wrap">
          <a class="btn" href="{% url 'website:staff_support_dashboard' %}">Support Desk</a>
          <a class="btn" href="{% url 'website:staff_support_dashboard' %}">View details</a>
        </div>
      </div>

      <div class="card" style="padding:14px">
        <div class="small" style="font-weight:900">Payments</div>
        <div class="h2" style="margin:6px 0 0">{{ stats.payments }}</div>
        <div class="row" style="margin-top:10px;gap:8px;flex-wrap:wrap">
          <a class="btn" href="{% url 'website:staff_payment_list' %}">Transactions</a>
          <a class="btn" href="{% url 'website:emr:staff_audit_log' %}">Activity</a>
        </div>
      </div>

      <div class="card" style="padding:14px">
        <div class="small" style="font-weight:900">EMR</div>
        <div class="h2" style="margin:6px 0 0">{{ stats.patients }}</div>
        <div class="small">Patients</div>
        <div class="row" style="margin-top:10px;gap:8px;flex-wrap:wrap">
          <a class="btn" href="{% url 'website:emr:staff_emr_dashboard' %}">Open EMR</a>
          <a class="btn" href="{% url 'website:emr:staff_patient_list' %}">View details</a>
        </div>
      </div>
    </div>

    <div class="sep"></div>

    {% if request.user.is_superuser or request.user.groups.all %}
    {% comment %}Administrative navigation is managed in the authorized sidebar, not as technical shortcuts.{% endcomment %}
    {% endif %}

    <div class="sep"></div>

    <div class="card">
      <div class="card-title">
        <div class="icon">🧾</div>
        <div>
          <h2 class="h2" style="margin:0">Recent Activity</h2>
          <div class="small">System events (bookings, payments, EMR notes)</div>
        </div>
      </div>
      <div class="sep"></div>
      {% for a in activity %}
        <div class="card" style="padding:12px;margin-bottom:8px">
          <b>{{ a.action }}</b>
          <div class="small">{{ a.summary }}</div>
          <div class="small" style="opacity:.7">{{ a.created_at|date:"Y-m-d H:i" }}</div>
        </div>
      {% empty %}
        <div class="small">No activity yet.</div>
      {% endfor %}
    </div>
  </div>
</section>
{% endblock %}